<template>
  <div class="spl-container  emp-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-title">
      <p class="text-blue">新建员工</p>
    </div>
    <div class="emp-tabs m-form">

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="个人基本情况" name="baseInfo">

          <div class="operate-btns">
            <el-button type="primary" @click="saveData('employee_info')">保存</el-button>
            <el-button>取消</el-button>
          </div>

          <dynamic-form :data="baseInfoList.length==0?[]:baseInfoList[0].dynamicFormSettingDTOs"></dynamic-form>

        </el-tab-pane>
        <!--<el-tab-pane label="教育经历" name="conManage">-->
        <!--<div>-->
        <!--<div class="operate-btns">-->
        <!--<el-button type="primary">保存</el-button>-->
        <!--<el-button>取消</el-button>-->
        <!--</div>-->
        <!--<div class="add-btn-long text-blue">-->
        <!--<i class="ic-circle-plus el-icon-circle-plus-outline"></i>-->
        <!--<span>添加教育经历</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="工作经历" name="roleManage">角色管理</el-tab-pane>-->

        <el-tab-pane label="在职信息" name="workInfo">
          <div class="operate-btns">
            <el-button type="primary" @click="saveData('work_info')">保存</el-button>
            <el-button>取消</el-button>
          </div>
          <dynamic-form :data="workInfoList.length==0?[]:workInfoList[0].dynamicFormSettingDTOs"></dynamic-form>
        </el-tab-pane>

        <el-tab-pane label="账户信息" name="accountInfo">
          <div class="operate-btns">
            <el-button type="primary" @click="saveData('bank_info')">保存</el-button>
            <el-button>取消</el-button>
          </div>
          <div>
            <p>银行卡信息</p>

            <div class="form-multiple-list" v-for="(item ,index) in bankInfoList" :key="index">
              <i class="el-icon-close ic-del-btn" @click="delBankInfo(index)"></i>
              <dynamic-form :data="item"></dynamic-form>
            </div>

            <div class="add-btn-long text-blue" @click="addBankInfo">
              <i class="ic-circle-plus el-icon-circle-plus-outline"></i>
              <span>添加银行卡信息</span>
            </div>
          </div>

          <div>
            <p>福利信息</p>
            <div class="form-multiple-list" v-for="(item ,index) in welfareInfoList" :key="index">
              <i class="el-icon-close ic-del-btn" @click="delWelfareInfo(index)"></i>
              <dynamic-form :data="item"></dynamic-form>
            </div>
            <div class="add-btn-long text-blue" @click="addWelfareInfo">
              <i class="ic-circle-plus el-icon-circle-plus-outline"></i>
              <span>添加添加福利信息</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="contractInfo">
          <div class="operate-btns">
            <el-button type="primary" @click="saveData('contact_info')">保存</el-button>
            <el-button>取消</el-button>
          </div>

          <dynamic-form :data="contactInfoList.length==0?[]:contactInfoList[0].dynamicFormSettingDTOs"></dynamic-form>
        </el-tab-pane>
        <!--<el-tab-pane label="资料信息" name="dataInfo"></el-tab-pane>-->
      </el-tabs>

    </div>
  </div>
</template>
<script>
  import dynamicForm from '../../components/common/dynamicForm/dynamicForm'
  export default {
    components: {dynamicForm},
    data () {
      return {
        // 导航
        pathData: [
          { name: '员工信息' },
          { name: '员工列表', path: '/employeeList' }
        ],
        activeName: 'baseInfo',
        dataForm: {
          'articleName': '2'
        },
        paneLoaded: {
          baseInfo: {loaded: false, moduleCode: "employee_info"},
          workInfo: {loaded: false, moduleCode: "work_info"},
          accountInfo: {loaded: false, moduleCode: "account_info"},
          contractInfo: {loaded: false, moduleCode: "contact_info"}
        },
        baseInfoList: [],//基本信息
        eduInfoList: [],//教育经历
        workedInfoList: [],//工作经历
        workInfoList: [],//在职信息
        bankInfoList: [],//银行卡信息
        welfareInfoList: [],//福利信息
        contactInfoList: [],//合同信息
        bankInfoItem: [],
        welfareInfoItem: [],
        employeeId: null//人员id
      }
    },
    created () {
      //  获取数据
      this.getData('employee_info')
    },
    methods: {
      test () {

      },
      // 获取数据
      getData (moduleCode) {
        this.$http({
          url: '/employeeInfo/getDynamicFormSetting',
          method: 'get',
          params: {
            moduleCode: moduleCode,
            effective: 1
          }
        }).then(({data}) => {
          // （个人基本信息：employee_Info,教育经历 edu_info 工作经历 worked_info 在职信息 work_info 账户信息 bank_info 合同信息 contact_info 资料信息 attach_info）
          console.log(data)
          var rows = data.rows
          if (rows != undefined && rows != null && rows.length > 0) {
            this.paneLoaded[this.activeName].loaded = true
          } else {
            return;
          }
          if (moduleCode === 'employee_info') {
            this.baseInfoList = rows
          } else if (moduleCode === 'edu_info') {
            this.eduInfoList = rows
          } else if (moduleCode === 'worked_info') {
            this.workedInfoList = rows
          } else if (moduleCode === 'work_info') {
            this.workInfoList = rows
          } else if (moduleCode === 'account_info') {
            const bankInfos = [], welfareInfos = [];
            rows.forEach(item => {
                item.dynamicFormSettingDTOs.forEach(it => {
                  if (it.subModuleCode === "bank_info") {
                    bankInfos.push(it)
                  } else {
                    welfareInfos.push(it)
                  }
                })
            })

            if(bankInfos.length>0){
              this.bankInfoList.push(bankInfos)
              this.bankInfoItem = this.$global.deepcopyArray(bankInfos)
            }

            if(welfareInfos.length>0){
              this.welfareInfoList.push(welfareInfos)
              this.welfareInfoItem = this.$global.deepcopyArray(welfareInfos)
            }

          } else if (moduleCode === 'contact_info') {
            this.contactInfoList = rows
          }
        })
      },
      handleClick (tab, event) {
        //console.log(tab)
        if (!this.paneLoaded[this.activeName].loaded) {
          this.getData(this.paneLoaded[this.activeName].moduleCode)
        }
      },
      //添加银行卡信息
      addBankInfo (){
          if(this.bankInfoItem.length>0){
            this.bankInfoList.push(this.$global.deepcopyArray(this.bankInfoItem))
          }
      },
      //删除银行信息
      delBankInfo(index){
        this.bankInfoList.splice(index, 1);
      },
      //添加福利卡信息
      addWelfareInfo (){
        if(this.welfareInfoItem.length>0){
          this.welfareInfoList.push(this.$global.deepcopyArray(this.welfareInfoItem))
        }
      },
      //删除福利信息
      delWelfareInfo(index){
        this.welfareInfoList.splice(index, 1);
      },
      //  保存
      saveData (moduleCode) {
        if (moduleCode != 'employee_info' && this.employeeId == null) {
          this.$message({
            message: "请先保存个人基本信息",
            type: 'warning'
          })
          return;
        }

        var listData;
        var that = this

        if (moduleCode === 'employee_info') {
          listData = this.baseInfoList
        } else if (moduleCode === 'edu_info') {
          listData = this.eduInfoList
        } else if (moduleCode === 'worked_info') {
          listData = this.workedInfoList
        } else if (moduleCode === 'work_info') {
          listData = this.workInfoList
        } else if (moduleCode === 'bank_info') {
          listData = [];
          if(this.bankInfoList.length>0){
            this.bankInfoList.forEach(item => {
              const itemCopy = this.$global.deepcopyArray(item);
              const employeeIdProperty = this.buildUpEmployeeIdProperty(item[0].entityName, moduleCode,item[0].subModuleCode);
              itemCopy.push(employeeIdProperty);
              listData.push({dynamicFormSettingDTOs:itemCopy})
            })
          }

          if(this.welfareInfoList.length>0){
            this.welfareInfoList.forEach(item => {
              const itemCopy = this.$global.deepcopyArray(item);
              const employeeIdProperty = this.buildUpEmployeeIdProperty(item[0].entityName, moduleCode,item[0].subModuleCode);
              itemCopy.push(employeeIdProperty);
              listData.push({dynamicFormSettingDTOs:itemCopy})
            })
          }

        } else if (moduleCode === 'contact_info') {
          listData = this.contactInfoList
        }
        var result = that.checkForm(listData)

        if (moduleCode != 'employee_info' && moduleCode!='bank_info') {
          const employeeIdProperty = this.buildUpEmployeeIdProperty(listData[0].dynamicFormSettingDTOs[0].entityName, moduleCode,listData[0].dynamicFormSettingDTOs[0].subModuleCode);
          listData[0].dynamicFormSettingDTOs.push(employeeIdProperty);
        }
        if (result) {
          that.$http({
            url: '/employeeInfo/saveOrUpdate',
            method: 'post',
            data: listData
          }).then(({data}) => {
            if (moduleCode === 'employee_info') {
              this.employeeId = data.employeeId;
            }
          })
        }
      },

      //  校验
      checkForm (listData) {
        var item
        for (var i = 0; i < listData.length; i++) {
          item = listData[i]
          if (item.required && !item.defaultValue) {
            this.$message({
              message: item.formName + '不能为空',
              type: 'warning'
            })
            return false
          }
        }
        return true
      },

      // 组装一个employeeId
      buildUpEmployeeIdProperty(entityName, moduleCode,subModuleCode){
        return {
          entityName: entityName,
          formKey: "employeeId",
          formName: "员工id",
          moduleCode: moduleCode,
          defaultValue: this.employeeId,
          subModuleCode : subModuleCode
        }
      }
    }

  }
</script>
<style lang="less" scoped>

</style>
